<script setup lang="ts">
import { ref } from 'vue';
</script>

<template>
  <page class="page" custom-overflow="visible">
    <page-template pageBgColor="#FF3693" footerBtnBg="#FF3693" footerBtnTitle="返回首页">
      <view class="head"></view>
      <view class="series-wrap-one">
        <view class="series-one">
          <image class="series-image-one" src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-one.png" mode="aspectFill"></image>
          <view class="series-one-right">
            <view class="series-title-box">
              <mark-tips bgColor="linear-gradient( 180deg, #333333 0%, #131313 100%)"></mark-tips>
              <view class="series-title" style="margin-left: 10rpx;">iPhone 15 Pro Max</view>
            </view>
            <view class="desc">6.7英寸屏幕 | A17Pro芯片</view>
            <view class="series-mark-box">
              <view class="series-mark-left">
                <view class="series-mark-one">全新拆封 未激活</view>
                <view class="series-mark-two">爆款热租 首月1元</view>
              </view>
              <view class="logistics-box"></view>
            </view>
            <view class="series-price-box">
              <view class="discount-box">首月1元</view>
              <view class="series-price-right">
                <price-box num="15.24" color="#FF1717"></price-box>
              </view>
            </view>
          </view>
        </view>
        <view class="series-three">
          <view class="series-three-item" v-for="item in 3" :key="item">
            <view class="img-box">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
              <view class="img-mark"><mark-tips bgColor="linear-gradient( 180deg, #333333 0%, #131313 100%)"></mark-tips></view>
              <view class="img-mark-bottom discount-mark">首月1元</view>
            </view>
            <view class="series-three-title">iPhone 15 Pro Max</view>
            <view class="discount-title">限时低价 售完即止</view>
            <view class="price-wrap">
              <price-box num="15.24" color="#FF1717"></price-box>
            </view>
          </view>
        </view>
      </view>
      <view class="series-wrap-two">
        <view class="series-two">
          <view class="series-two-item" v-for="item in 4" :key="item"> 
            <view class="series-title-box">
              <mark-tips bgColor="linear-gradient( 180deg, #333333 0%, #131313 100%)"></mark-tips>
              <view class="series-title" style="margin-left: 10rpx;">iPhone 15 Pro Max</view>
            </view>
            <view class="discount-title">限时低价 售完即止</view>
            <view class="two-img-box">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
              <view class="two-img-right">
                <view class="discount-mark" style="margin-bottom: 20rpx;">首月1元</view>
                <view class="logistics-box"></view>
              </view>
            </view>
            <view class="price-wrap" style="margin-top: 10rpx; height:80rpx;">
              <price-box num="15.24" color="#FF1717"></price-box>
            </view>
          </view>
        </view>
      </view>
      <view class="series-wrap-three">
        <view class="series-three" v-for="item in 2" :key="item">
          <view class="series-three-item" v-for="item in 3" :key="item">
            <view class="img-box">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
              <view class="img-mark"><mark-tips bgColor="linear-gradient( 180deg, #333333 0%, #131313 100%)"></mark-tips></view>
              <view class="img-mark-bottom discount-mark">首月1元</view>
            </view>
            <view class="series-three-title">iPhone 15 Pro Max</view>
            <view class="discount-title">限时低价 售完即止</view>
            <hire-button style="box-shadow: inset 0rpx 3rpx 20rpx 1rpx #FFFFFF;" bgColor="linear-gradient( 140deg, #FF279A 0%, #FF3B3B 100%)">
              <price-box num="15.24" color="#FFFFFF" style="margin-right: 10rpx;"></price-box>
            </hire-button>
          </view>
        </view>
      </view>
      <view class="series-wrap-four">
         <view class="series-two" style="padding-bottom: 0;">
          <view class="series-two-item" v-for="item in 2" :key="item"> 
            <view class="series-title-box">
              <mark-tips bgColor="linear-gradient( 180deg, #333333 0%, #131313 100%)"></mark-tips>
              <view class="series-title" style="margin-left: 10rpx;">iPhone 15 Pro Max</view>
            </view>
            <view class="discount-title">限时低价 售完即止</view>
            <view class="two-img-box">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
              <view class="two-img-right">
                <view class="discount-mark" style="margin-bottom: 20rpx;">首月1元</view>
                <view class="logistics-box"></view>
              </view>
            </view>
            <view class="price-wrap" style="margin-top: 10rpx; height:80rpx;">
              <price-box num="15.24" color="#FF1717"></price-box>
            </view>
          </view>
        </view> 
        <view class="series-three" style="margin-top: 0;" v-for="item in 1" :key="item">
          <view class="series-three-item" v-for="item in 3" :key="item">
            <view class="img-box">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
              <view class="img-mark"><mark-tips bgColor="linear-gradient( 180deg, #333333 0%, #131313 100%)"></mark-tips></view>
              <view class="img-mark-bottom discount-mark">首月1元</view>
            </view>
            <view class="series-three-title">iPhone 15 Pro Max</view>
            <view class="discount-title">限时低价 售完即止</view>
            <hire-button style="box-shadow: inset 0rpx 3rpx 20rpx 1rpx #FFFFFF;" bgColor="linear-gradient( 140deg, #FF279A 0%, #FF3B3B 100%)">
              <price-box num="15.24" color="#FFFFFF" style="margin-right: 10rpx;"></price-box>
            </hire-button>
          </view>
        </view>
      </view>
    </page-template>
  </page>
</template>
<style lang="scss" scoped>
.head{
  margin-left: -20rpx;
  margin-right: -20rpx;
  height: 638rpx;
  background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-head.png') no-repeat center center/100% 100%;
}
.desc{
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 20rpx;
    color: #000000;
    line-height: 28rpx;
  }
.series{
  &-wrap-one, &-wrap-two, &-wrap-three, &-wrap-four{
    margin-bottom: 20rpx;
    padding: 102rpx 6rpx 12rpx;
  }
  &-wrap-one{
    margin-top:-20rpx;
    background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-series-1.png') no-repeat center center/100% 100%; 
  }
  &-wrap-two{
    background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-series-2.png') no-repeat center center/100% 100%;
  }
  &-wrap-three{
    background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-series-3.png') no-repeat center center/100% 100%;
    .series-three{
      &:last-child{
        margin-top: 0;
      }
    }
  }
  &-wrap-four{
    background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-series-4.png') no-repeat center center/100% 100%;
  }
  &-title{
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    line-height: 44rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &-box{
      width: 100%;
      display: flex; 
      align-items: center;
      overflow: hidden;
    }
  }
  &-one{
    padding: 20rpx 20rpx 20rpx 8rpx;
    display: flex;
    background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-series-one-bg.png') no-repeat center center/100% 100%;
    image{
      flex-shrink: 0;
      width: 240rpx; 
      height: 280rpx;
    }
    &-right{
      margin-left: 10rpx;
    }
  }
  &-mark{
    &-box{ 
      margin-top: 16rpx;
      display: flex;
    }
    &-left{
      margin-right: 36rpx;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 26rpx;
      color: #FFFFFF;
      line-height: 44rpx;
    }
    &-one{
      margin-bottom:5rpx;
      width: 248rpx;
      height: 44rpx;
      padding-left:30rpx; 
      padding-right: 20rpx;
      background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-mark-1.png') no-repeat center center/100% 100%;
    }
    &-two{
      width: 248rpx;
      height: 44rpx;
      padding-left: 26rpx; 
      padding-right: 12rpx;
      background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-mark-2.png') no-repeat center center/100% 100%;
    }
  }
  &-price{
    &-box{
      padding-left: 16rpx;
      padding-top: 16rpx;
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-right{
      width: 240rpx;
      height: 60rpx;
      padding-left: 16rpx;
      display: flex;
      align-items: center;
      background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-price-2.png') no-repeat center center/100% 100%;
    }
  }
  &-three{
    margin-top: 10rpx;
    display: flex;
    padding: 0 10rpx 10rpx;
    &-item{
      margin-right:10rpx;
      padding: 26rpx 10rpx 20rpx;
      display: flex;
      flex-direction: column; 
      align-items: center;
      background: #FFFFFF;
      border-radius: 20rpx;
      overflow: hidden;
      &:last-child{
        margin-right: 0;
      }
    }
    &-title{
      margin-top: 40rpx;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 22rpx;
      color: #000000;
      line-height: 30rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  &-two{
    padding: 0 10rpx 10rpx;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    &-item{
      margin-bottom: 10rpx;
      margin-right: 10rpx;
      width: calc(50% - 5rpx);
      padding: 26rpx 10rpx 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #FFFFFF;
      border-radius: 20rpx;
      &:nth-child(2n){
        margin-right: 0;
      }
      &:nth-child(3), &:nth-child(4){
        margin-bottom: 0;
      }
    }
  }
}
.two-img{
  &-box{
    display: flex;
    align-items: center;
    image{
    flex-shrink: 0;
    width: 150rpx;
    height: 186rpx;
    }
  }
  &-right{
    margin-left: 10rpx;
  }
}
.img{
  &-box{ 
    position: relative;
    width: 150rpx; 
    height: 150rpx;
    image{
      flex-shrink: 0;
      width: 150rpx; 
      height: 150rpx;
    }
  }
  &-mark{ 
    position: absolute;
    top: -16rpx;
    left: -15rpx;
    &-bottom{
      position: absolute;
      bottom: -28rpx;
      left: 10rpx;
    }
  }
}
.discount-title{
  margin-bottom: 10rpx;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 20rpx;
  color: #F43139;
  line-height: 28rpx;
}
.price-wrap{
  width: 100%;
  height: 50rpx;
  padding-left: 4rpx;
  display: flex;
  align-items: center; 
  background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-price-2.png') no-repeat center center/100% 100%;
}
.logistics-box{ 
  width: 138rpx;
  height: 76rpx;
  background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-logistics.png') no-repeat center center/100% 100%;
}
.discount-box{
  width: 129rpx;
  height: 36rpx;
  text-align: center;
  line-height: 36rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #FF1717; 
  background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-mark-3.png') no-repeat center center/100% 100%;
}
.discount-mark{  
  width: 129rpx;
  height: 36rpx;
  line-height: 36rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #FF1717;
  text-align: center;
  background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/iphone-mark-4.png') no-repeat center center/100% 100%;
}

</style>

